<template>
  <div class="app-container">
        <div class="cbox">
          <el-form class="form" ref="form" :model="from" label-width="6rem" size="mini">
            <el-row  class="row">
              <el-col :span="3">
                <el-form-item label="车次">
                  <el-input   placeholder="请输入车次" v-model="from.Code"  clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="始发站">
                  <el-input   placeholder="请输入始发站" v-model="from.SFname"  clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="终点站">
                  <el-input   placeholder="请输入终点站" v-model="from.ZDname"  clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item label-width="10px">
                  <el-button @click="searchType" type="primary">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-row :gutter="10" class="btn-area">
                <el-col :span="24">
                  <el-button size="mini" type="success" plain @click="add">新增</el-button>
                  <el-button size="mini" type="primary" plain @click="edit('diong')">编辑</el-button>
                  <el-button plain size="mini" type="danger" @click="del">删除</el-button>
                </el-col>
          </el-row>
        <div class="table" ref="topType">
            <div class="inner" ref="inner">
                  <el-table
                      :data="DetailedData"
                      border
                      :height="maxHeight"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      @row-dblclick='rowdbClick'
                      @row-click="rowClick">
                      <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="noTitle"  show-overflow-tooltip label="车次"></el-table-column>
                      <el-table-column prop="noContent"  show-overflow-tooltip label="列车类型"></el-table-column>
                      <el-table-column prop="noInsertdt"  show-overflow-tooltip label="始发站"></el-table-column>
                      <el-table-column prop="noInsertuser"  show-overflow-tooltip label="始发城市"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="装车组织站"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="终到城市"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="终点站"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="上下行"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="开行周期(列/周)"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="最小编成数(车)"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="最大编成数(车)"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="运行时间(小时)"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="铁路货运里程(公里)"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="输入时间"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="输入员工"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="最后修改时间"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="最后修改员工"></el-table-column>
                  </el-table>
            </div>
        </div>
          <!-- 分页 -->
          <el-pagination
            class="pagination"
            small
            background
            ref="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Pagination.currentPage"
            :page-sizes="Pagination.pageSizeList"
            :page-size="Pagination.pageSize"
            :layout="Pagination.layout"
            :total="Pagination.total"
          ></el-pagination>

        <!-- 弹出框 新增 编辑 查看-->
        <el-dialog
          :title='addText'
          :visible.sync="addShowA"
          v-if="addShowA"
          v-el-drag-dialog
          :close-on-click-modal="false">
              <el-form  label-width="15rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                  <el-row>
                      <el-col :span="12">
                        <el-form-item prop="cc" label="车次：" >
                          <el-input maxlength="32"  v-model="xzData.cc" clearable @change="uppercase('cc')"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="lclx" label="列车类型：" >
                          <el-select style="width: 100%;" filterable allow-create clearable v-model="xzData.lclx">
                              <el-option
                              v-for=" item in listData"
                              :key="item.code"
                              :value="item.code"
                              :label="item.name"
                            ></el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item prop="zczzz" label="装车组织站：">
                          <el-input maxlength="32" style="width: 78%;" v-model="xzData.zczzz" clearable></el-input>
                            <template>
                              <div class="box">
                                  <el-button size="mini" type="primary" @click="YZData" plain>选择</el-button>
                              </div>
                            </template>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="zzzzzdbm" label="装车组织站电报码：">
                          <el-input maxlength="32"  v-model="xzData.zzzzzdbm" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="始发站：" prop="sfz">
                            <el-input maxlength="32" style="width: 78%;"  v-model="xzData.sfz" clearable ></el-input>
                            <template>
                              <div class="box">
                                  <el-button size="mini" type="primary" @click="YZData" plain>选择</el-button>
                              </div>
                            </template>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="始发站电报码：" prop="sfzdbm">
                            <el-input maxlength="32" v-model="xzData.sfzdbm" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="始发城市：" prop="sfcs">
                            <el-input maxlength="32" v-model="xzData.sfcs" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="zdz" label="终点站：">
                          <el-input maxlength="32"  style="width: 78%;"  v-model="xzData.zdz" clearable></el-input>
                          <template>
                              <div class="box">
                                  <el-button size="mini" type="primary" @click="YZData" plain>选择</el-button>
                              </div>
                            </template>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="终点站电报码：" prop="zdzdbm" >
                          <el-input maxlength="32"  v-model="xzData.zdzdbm" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="zdcs" label="终到城市：" >
                          <el-input maxlength="32"  v-model="xzData.zdcs" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="速度标尺：" prop="sdbc" >
                          <el-input maxlength="32" v-model="xzData.sdbc" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="kxzq" label="开行周期：" >
                          <el-input maxlength="32"  v-model="xzData.kxzq" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="最小编成量数：" prop="zxbcls" >
                          <el-input maxlength="32"  v-model="xzData.zxbcls" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="zdbcls" label="最大编成量数：" >
                          <el-input maxlength="32"  v-model="xzData.zdbcls" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="编组内容：" prop="bznr" >
                          <el-input maxlength="32"  v-model="xzData.bznr" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="blsxh" label="班列上下行：" >
                          <el-select style="width: 100%;" filterable allow-create clearable v-model="xzData.blsxh">
                              <el-option
                              v-for=" item in listDataA"
                              :key="item.code"
                              :value="item.code"
                              :label="item.name"
                            ></el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="运行时间(小时)：" prop="yxsj" >
                          <el-input maxlength="32"  v-model="xzData.yxsj" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="tlhylc" label="铁路货运里程(公里)：" >
                          <el-input maxlength="32"  v-model="xzData.tlhylc" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                        <el-form-item prop="bz" label="备注：">
                          <el-input maxlength="32" type="textarea" v-model="xzData.bz" clearable></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
                  <div slot="footer" class="dialog-footer">
                      <el-button type="primary" v-if="see" @click="saveEditor('xzData')" size="mini">保存</el-button>
                      <el-button  @click="close" size="mini">关闭</el-button>
                  </div>
        </el-dialog>

        <!-- 二级弹出框 -->
        <el-dialog
          :title='addText'
          :visible.sync="addShowB"
          v-if="addShowB"
          v-el-drag-dialog
          :append-to-body="true"
          :close-on-click-modal="false">
          <div class="cbox">
              <el-form class="form" ref="form" :model="fromA" label-width="8rem" size="mini">
                <el-row  class="row">
                  <el-col :span="6">
                    <el-form-item label="电报码">
                      <el-input   placeholder="请输入电报码" v-model="from.Code"  clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="货站站名">
                      <el-input   placeholder="请输入货站站名" v-model="from.SFname"  clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="所属省">
                      <el-input   placeholder="请输入所属省" v-model="from.ZDname"  clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <el-form-item label-width="10px">
                      <el-button @click="searchType" type="primary">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
          </div>
          <h4>班列信息列表</h4>
          <el-row :gutter="10" class="btn-area">
                <el-col :span="24">
                  <el-button size="mini" type="primary" plain @click="confirm">确认</el-button>
                </el-col>
           </el-row>
          <div class="table" ref="topType">
            <div class="inner" ref="inner">
                  <el-table
                      :data="DetailedDataA"
                      border
                      :height="400"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      >
                      <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="noTitle"  show-overflow-tooltip label="电报码"></el-table-column>
                      <el-table-column prop="noContent"  show-overflow-tooltip label="货站站名"></el-table-column>
                      <el-table-column prop="noInsertdt"  show-overflow-tooltip label="所属省"></el-table-column>
                  </el-table>
          </div>
          <el-pagination
            class="pagination"
            v-if="addShowB"
            small
            background
            ref="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Pagination.currentPage"
            :page-sizes="Pagination.pageSizeList"
            :page-size="Pagination.pageSize"
            :layout="Pagination.layout"
            :total="Pagination.total"
          ></el-pagination>
        </div>
        </el-dialog>
  </div>
</template>

<script>
import {
  NoticeDataList,
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      from:{
        Code:'',
        SFname:'',
        ZDname:'',
      },
      fromA:{
        Code:'',
        SFname:'',
        ZDname:'',
      },
      listData:[
        {code:'1',name:'班列'},
        {code:'2',name:'散列'}
      ],
      listDataA:[
        {code:'1',name:'上行'},
        {code:'2',name:'下行'}
      ],
      maxHeight:-1,
      DetailedData:[], //主列表的数据
      DetailedDataA:[],//二级弹窗列表数据
      diong:'E',
      addText:'',
      addShowA:false, // 新增 编辑
      addShowB:false, // 二级弹窗
      see:true, //保存按钮
      xzData:[],
      addRules:{
        cc:[
          { required: true, message: '请填写车次', trigger:'blur'}
        ],
        lclx:[
          { required: true, message: '请选择列车类型', trigger:'change'}
        ],
        zczzz:[
          { required: true, message: '请填写装车组织站', trigger:'blur'}
        ],
        zzzzzdbm:[
          { required: true, message: '请填写装车组织站电报码', trigger:'blur'}
        ],
        sfz:[
          { required: true, message: '请填写始发站', trigger:'blur'}
        ],
        sfzdbm:[
          { required: true, message: '请填写始发站电报码', trigger:'blur'}
        ],
        sfcs:[
          { required: true, message: '请填写始发城市', trigger:'blur'}
        ],
        zdz:[
          { required: true, message: '请填写终点站', trigger:'blur'}
        ],
        zdzdbm:[
          { required: true, message: '请填写终点站电报码', trigger:'blur'}
        ],
        zdcs:[
          { required: true, message: '请填写终到城市', trigger:'blur'}
        ],
        sdbc:[
          { required: true, message: '请填写速度标尺', trigger:'blur'}
        ],
        kxzq:[
          { required: true, message: '请填写开行周期', trigger:'blur'}
        ],
        blsxh:[
          { required: true, message: '请选择班列上下行', trigger:'change'}
        ],
      }
    }
  },
  created(){
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.refreshList()
  },
  methods:{
    //点击选择出现二级弹出框
    YZData(){
      this.addText = '查看站点信息'
      this.addShowB = true
    },
    confirm(){
      this.addShowB = false
    },
    // 切换大写
    uppercase(key) {
      this.xzData[key] = this.xzData[key].toUpperCase()
    },
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      NoticeDataList({
        noTitle:this.from.Code,
        noContent:this.from.CodeName,
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.DetailedData = response.data
        updateTotal(Number(response.total))
      })
    },
    //点击搜索
    searchType(){
      this.refreshList()
    },
    add(){
      this.addText = '新增班列计划'
      this.addShowA = true
      this.see = true
    },
    //关闭弹出框
    close(){
      this.addShowA = false
    }
  }
}
</script>

<style  lang="scss" scoped>
// .el-select {
//   width: 100%;
// }
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    position: relative;
    overflow: hidden;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
.box{
  position: absolute;
  top:0px;
  right: 0px;
}
</style>
